<template>
  <div
    :style="{
      paddingBottom: tempData.paddingBottom + 'px',
      paddingLeft: tempData.paddingTwice + 'px',
      paddingRight: tempData.paddingTwice + 'px',
      paddingTop: tempData.paddingTop + 'px',
      boxSizing: 'border-box',
    }"
  >
    <div
      :class="['line', tempData.lineType]"
      :style="{
        borderTop: tempData.lineHeight + 'px' + +tempData.lineType + +tempData.lineColor,
        borderColor: tempData.lineColor,
        borderTopWidth: tempData.lineHeight + 'px',
      }"
    ></div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, watch } from 'vue'

  const props = defineProps({
    // 选中的当前组件参数
    compObj: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  console.log(props)
  const tempData: any = ref({})
  const steps = ref('3s')
  watch(
    () => props.compObj,
    (newVal, oldVal) => {
      tempData.value = JSON.parse(JSON.stringify(newVal))
    },
    { immediate: true, deep: true }
  )
</script>

<style lang="less" scoped>
  .line {
    width: 100%; /* 线条宽度占满容器 */
    border-top-width: 2px; /* 默认线条厚度 */
    border-style: solid; /* 默认样式 */
  }
  .solid {
    border-style: solid;
  }
  .dashed {
    border-style: dashed;
  }
  .dotted {
    border-style: dotted;
  }
</style>
